<template>
    <div>
        用户名：<input type="text" v-model="loginForm.user">
        <!-- 取出input绑定的数据 -->
        密码：<input type="text" v-model="loginForm.pass"/>
        <input type="button" value="登录" @click="clickLogin">
        <!-- 这个会默认表单提交<button @click="clickLogin">登录</button> -->
    </div>
</template>

<script setup lang="ts">
//引入login的仓库方法
import{useLoginStore} from '@/stores/login'
import { useRouter } from 'vue-router';
import {reactive} from 'vue'

const loginForm=reactive({
    user:'',
    pass:''
})
const loginStore=useLoginStore()
const router=useRouter()

function clickLogin(){
    loginStore.changeLB(loginForm)//动态传输
    // loginStore.changeLB({user:'张三',pass:'123456'})
    if (loginStore.loginBoolean){//登录成功跳转首页
        router.push('/')
    }else{
        alert('用户名密码错误')
    }
}
</script>

<style scoped>

</style>